<template>
  <div class="rightBarBox" data-v-097f6944 data-v-37dffbed>
    <div class="rightBar" data-v-097f6944 ref="myIconbox">
      <div class="iconBox" data-v-097f6944>
        <div class="addvice hoverIcon iconItem" data-v-097f6944>
          <i alt="意见反馈" class="iconfont iconfankui" data-v-097f6944></i>
          <span data-v-097f6944>意见反馈</span>
        </div>
        <div class="message hoverIcon iconItem" data-v-097f6944>
          <i alt="消息推送" class="iconfont iconmessage-nor" data-v-097f6944></i>
          <span data-v-097f6944>消息推送</span>
          <!---->
        </div>
        <div class="shopCar iconItem" data-v-097f6944 @click="handleShow">
          <i alt="购物车" class="iconfont icongouwuche1 carIcon" data-v-097f6944></i>
          <strong data-v-097f6944>购</strong>
          <strong data-v-097f6944>物</strong>
          <strong data-v-097f6944>车</strong>
        </div>
        <div class="helpCenter hoverIcon iconItem" data-v-097f6944>
          <i alt="客服中心" class="iconfont iconkefu1" data-v-097f6944></i>
          <span class="fixedServe" data-v-097f6944>客服中心</span>
        </div>
      </div>
      <div class="contentBox" data-v-097f6944>
        <!---->
        <div class="message" style="display:none;" data-v-5d84c863 data-v-097f6944>
          <h6 class="title" data-v-5d84c863>消息推送</h6>
          <div class="emptyBox" data-v-5d9c6517 data-v-5d84c863>
            <img src="../assets/picture/f6be5a0.png" alt="内容为空" class="emptyImg" data-v-5d9c6517 />
            <span class="title" data-v-5d9c6517>无数据</span>
            <!---->
          </div>
          <!---->
        </div>

        <!---->
        <div class="shopCar" style data-v-6df687d2 data-v-097f6944>
          <div class="listBox" data-v-6df687d2>
            <div class="titleHead" data-v-6df687d2>
              <span data-v-6df687d2>商品</span>
              <span data-v-6df687d2>数量/重量</span>
              <span data-v-6df687d2>价格</span>
              <span data-v-6df687d2>删除</span>
            </div>
            <ul data-v-6df687d2 class="listItemBox">
              <li data-v-6df687d2 class="listItem" v-for="(item,index) in cartdata" :key="index">
                <div data-v-6df687d2 class="detailBox">
                  <span data-v-6df687d2 class="productName">{{item.title}}</span>
                  <div data-v-6df687d2 class="detail">
                    <img
                      data-v-6df687d2
                      :src="item.n==1?item.picList.slice(2,-2):item.picUrl"
                      class="mainPic"
                    />
                    <div data-v-6df687d2 class="productNums">
                      <div data-v-6df687d2 class="numsTop">
                        <div data-v-34e4c1b9 data-v-6df687d2 class="numberCountF">
                          <div data-v-34e4c1b9 class="numberCount">
                            <i data-v-34e4c1b9 class="el-icon-minus left"></i>
                            <input data-v-34e4c1b9 type="number" class="countNumInput" :value="item.num"/>
                            <i data-v-34e4c1b9 class="el-icon-plus right"></i>
                          </div>
                          <!---->
                        </div>
                        <strong data-v-6df687d2>￥ {{item.price}}</strong>
                        <i data-v-6df687d2 title="删除" class="el-icon-close dele" @click="handleDel(index)"></i>
                      </div>
                      <span data-v-6df687d2 class="weight">{{item.weight}}kg</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div class="carEmpty" data-v-6df687d2 v-if="cartdata.length==0">
              <img
                src="../assets/picture/f6be5a0.png"
                alt="购物车为空"
                class="noContImg"
                data-v-6df687d2
              />
              <span data-v-6df687d2>您的购物车是空的哦～</span>
            </div>
          </div>
          <div class="countBox" data-v-6df687d2>
            <div class="tipsBox" data-v-6df687d2>
              <span data-v-6df687d2>下单后</span>
              <strong data-v-6df687d2>每个收件人</strong>
              <span data-v-6df687d2>将收到以上产品</span>
              <div class="arrowBox" data-v-6df687d2>
                <i class="arrow" data-v-6df687d2></i>
              </div>
            </div>
            <p class="countPtext" data-v-6df687d2>
              <span data-v-6df687d2>商品价格</span>
              <strong data-v-6df687d2>￥{{alldata.allprice}}</strong>
            </p>
            <p class="countPtext" data-v-6df687d2>
              <span data-v-6df687d2>
                总数量
                <!-- <em data-v-6df687d2>(0.00kg)</em> -->
              </span>
              <strong data-v-6df687d2>{{alldata.allnum}}</strong>
            </p>
            <p class="countPtext" data-v-6df687d2>
              <span data-v-6df687d2>总价</span>
              <strong class="totalCount" data-v-6df687d2>￥{{alldata.allprice}}</strong>
            </p>
            <div class="makeOrder" data-v-6df687d2>
              <button class="orderButton" data-v-6df687d2>
                <router-link to="/cart/shopcar">确认选择</router-link>
              </button>
              <span class="clearAll" data-v-6df687d2>清空重选</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="empty emptyNone" data-v-097f6944></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      i: 0,
      num:1
    };
  },
  methods: {
    handleShow() {
      this.i++;
      if (this.i % 2 == 1) {
        this.$refs.myIconbox.style.right = "0";
      } else {
        this.$refs.myIconbox.style.right = "-280px";
      }
    },
    handleDel(i){
      this.$store.commit('cartDel',i)
    }
  },
  created() {
    this.num=this.cartdata.num
  },
  computed: {
    cartdata() {
      return this.$store.state.shopping;
    },
    alldata(){
      return this.$store.getters.countnum;
    }
  },
};
</script>

<style>
</style>